<template>
<div class="shopCart">
  <div style="margin-left: 100px">
    <h2>购物车</h2>
  </div>
  <div style="padding: 20px 100px 0 100px">
    <div style="margin-bottom: 20px">
      <el-row :gutter="20">
        <el-col :span="2" :offset="1"> <el-checkbox @change="changeAllShopData" v-model="checked">全选</el-checkbox></el-col>
        <el-col :span="9">商品信息</el-col>
        <el-col :span="3">单价</el-col>
        <el-col :span="3">数量</el-col>
        <el-col :span="3">金额</el-col>
        <el-col :span="3">操作</el-col>
      </el-row>
    </div>
<!--购物车商品显示-->
<!--    shoppingList-->
    <div style="height: 100px;border: 1px solid #ccc;padding: 15px 0" class="shopCartStyle" v-for="item in shoppingList">
      <el-row :gutter="20">
        <el-col :span="3" style=""> <el-checkbox @change="changeShopData" v-model="item.checked"></el-checkbox></el-col>
        <el-col :span="9" style="padding-right: 40px">
          <div style="display: flex">
            <div style="">
              <el-image
                style="width: 70px; height: 70px"
                :src="getUrl(item.shopImg)"
                fit="fill"></el-image>
            </div>
            <div style="font-size: 14px;color: #6c6c6c;line-height: 20px;">{{item.shopIntroduce}}</div>
          </div>

        </el-col>
        <el-col :span="3" style="color: #3c3c3c;font-weight: 700;">￥{{item.shopPrice}}</el-col>
        <el-col :span="3"> <el-input-number v-model="item.shopNum" @change="handleChange(item)" :min="1" :max="10" label="数量"></el-input-number></el-col>
        <el-col :span="3" style="color: #3c3c3c;font-weight: 700;color: red">￥{{item.shopPrice*item.shopNum}}</el-col>
        <el-col :span="3" class="deleteData"><p @click="deleteShop(item)">删除</p></el-col>
      </el-row>
    </div>

  </div>
  <!--    结算-->
  <div class="sumData">
    <el-row :gutter="20">
      <el-col :span="3"> <el-checkbox @change="changeAllShopData" v-model="checked">全选</el-checkbox></el-col>
      <el-col :span="9" style="cursor: pointer"><p @click="deleteAllData">删除</p></el-col>
      <el-col :span="9">已选商品{{num}}件</el-col>
      <el-col :span="3" style="cursor: pointer"><p @click="addOrder">结算</p></el-col>
    </el-row>
  </div>
  <!-- 选择地址对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
    <el-form ref="addressForm" :model="addressForm" :rules="rules" label-width="70px">
      <el-form-item label="收货地址" prop="addressPhone">
        <el-select v-model="addressForm.addressId" placeholder="请选择收货地址">
          <el-option v-for="option in addressList" :key="option.addressId"
                     :value="option.addressId" :label="option.addressText" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {delShopping, listShopping2, updateShopping} from "@/api/book/shopping";
import {addBookorder} from "@/api/book/bookorder";
import {addAddress, listAddress, updateAddress} from "@/api/book/address";

export default {
  name: "ShopCart",
  data(){
    return{
      title:'',
      open:false,
      //收货地址数据
      addressList:[],
      // 表单参数
      addressForm:{},
      // 表单校验
      rules: {
        addressId: [
          { required: true, message: '请选择收货地址', trigger: 'change' }
        ],
      },
      shoppingList:[],
      checked:false,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      num: 0,
      allCheckedFlag: true  //控制全选是否选中
    }
  },
  watch:{
    /** 监听全部勾选和全部取消勾选*/
    checked(val, oldVal){//普通的watch监听
      if (this.allCheckedFlag){
        this.shoppingList.forEach(item=>{
          item.checked=val
        })
      }
    },
  },
  created() {
    this.getList()
    this.getAddressList()
  },
  methods: {
    //获取收货地址数据
    getAddressList(){
      listAddress(this.queryParams).then(response => {
        this.addressList = response.rows;
      });
    },
    //选择收货地址
    submitForm(){
      this.$refs["addressForm"].validate(valid => {
        if (valid) {
            let shopIds=[]
            let shopNums=[]
            this.shoppingList.forEach(item=>{
              if (item.checked===true){
                shopIds.push(item.shopId)
                shopNums.push(item.shopNum)
              }
            })
            addBookorder({
              shopIds:shopIds.join(','),
              shopNums:shopNums.join(','),
              addressId:this.addressForm.addressId
            }).then(response => {
              this.msgSuccess("结算成功");
              this.getList();
            });
            this.open = false;
            this.getList();
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.addressForm = {
        addressId: null
      };
      this.resetForm("form");
    },
    /**结算商品 */
    addOrder(){
      this.$confirm('是否确认结算购物车所有勾选数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.open=true
      }).catch(function() {
      });
    },
    changeAllShopData(){
      this.allCheckedFlag=true
    },
    /**绑定已选择商品数量 */
    changeShopData(){
      let num=0
      this.shoppingList.forEach(item=>{
        if(item.checked===true){
          num++
        }
      })
      this.num=num
      if (this.num===this.shoppingList.length){
        this.allCheckedFlag=false
        this.checked=true
      }else{
        this.allCheckedFlag=false
        this.checked=false
      }
    },
    /**删除所有数据 */
    deleteAllData(){
      this.$confirm('是否确认删除购物车所有勾选数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.shoppingList.forEach(item=>{
          if (item.checked===true){
            this.deleteShop(item)
          }
        })
      }).catch(function() {
      });
    },
    /** 删除 */
    deleteShop(row) {
      this.$confirm('是否确认删除购物车该数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delShopping(row.shopingId);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function() {
      });
    },
    getUrl(data){
      return  process.env.VUE_APP_BASE_API+"/"+data
    },
    /** 查询购物车管理列表 */
    getList() {
      listShopping2(this.queryParams).then(response => {
        response.rows.forEach(item=>{
          item.checked=false
        })
        this.shoppingList = response.rows;
      });
    },
    /**修改购物车商品数量 */
    handleChange(item) {
      updateShopping({
        shopingId:item.shopingId,
        shopNum:item.shopNum
      }).then(response => {
        this.getList();
      });
    }
  }
}
</script>

<style scoped>
.el-select{
  width: 100%;
}
.shopCart p{
  margin: 0;
}
.sumData{
  position: fixed;
  height: 50px;
  line-height: 50px;
  width: 100%;
  bottom: 10px;
  /*border: 1px solid red;*/
  background-color: #e5e5e5;
  z-index: 9999;
}
.el-row{
  text-align: center;
}
.shopCartStyle .el-col{
  text-align: center;
  line-height: 70px;
}
.el-input-number--medium {
  width: 130px;
  line-height: 34px;

}
.deleteData{
  cursor: pointer;
}
.deleteData:hover{
  color: red;
}
</style>
